<template>
	<view class="newsContent">
		<view class="box">
			<view class="icon" v-for="item in iconList" :key="item.id">
				<view class="box-img">
					<image class="img" :src="item.src"   ></image>
				</view>
				<view class="icon-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="newsList">
			<view class="item" v-for="item in newsList"  :key="item.id">
				<view class="author-img-box">
					<image class="author-img" src="http://124.221.26.166:8080/pic/girl.jpg"></image>
				</view>
				<view class="text">
					<view class="top">
						<view class="name">
							{{item.name}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
					<view class="content">
						{{item.content}}
					</view>
				</view>
			</view>
			<view class="more">
				无更多消息
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"newsContent",
		data() {
			return {
				newsList:[
					{
						id:1,
						name:"张一",
						time:'1-13',
						content:'我!!!'
					},
					{
						id:2,
						name:"张二",
						time:'1-14',
						content:'真!!!'
					},
					{
						id:3,
						name:"张三",
						time:'1-15',
						content:'的!!!'
					},
					{
						id:4,
						name:"张四",
						time:'1-16',
						content:'好!!!'
					},
					{
						id:5,
						name:"张五",
						time:'1-17',
						content:'想!!!'
					},
					{
						id:6,
						name:"张六",
						time:'1-18',
						content:'你!!!'
					}
				],
				iconList:[
					{
						id:1,
						src:'http://124.221.26.166:8080/pic/fangsi.png',
						text:"粉丝"
					},
					{
						id:2,
						src:'http://124.221.26.166:8080/pic/zan.png',
						text:"赞"
					},
					{
						id:3,
						src:'http://124.221.26.166:8080/pic/pinglun.png',
						text:"评论"
					},
					{
						id:4,
						src:'http://124.221.26.166:8080/pic/hudong.png',
						text:"互动"
					}
				]
			};
		}
	}
</script>

<style>
	.newsContent{
		width: 100%;
		background: #000000;
	}
	.box{
		width: 100%;
		height: 120px;
	}
	.icon{
		width: 25%;
		height: 100px;
		float: left;
		margin: 0 auto;
	}
	.box-img{
		text-align: center;
	}
	.img{
		width: 40px;
		height: 40px;
		border-radius: 5px;
		margin-top: 20px;
		margin-left: 4.5px;
	}
	.icon-text{
		font-size: 13px;
		text-align: center;
		color: #eee;
		margin-top: 4px;
	}
	.newsContent{
		background:#000000;
	}
	.item{
		height: 60px;
		padding: 15px 10px;
	}
	.author-img-box{
		float: left;
		margin-left: 10px;
	}
	.author-img{
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
	.text{
		float: left;
		margin-left: 20px;
		height: 50px;
		width: 75%;
		color: #FFFFFF;
	}
	.top{
		height: 25px;
		line-height: 25px;
	}
	.name{
		float: left;
		font-size: 18px;
	}
	.time{
		float: right;
		font-size: 11px;
		color: #AAAAAA;
	}
	.content{
		height: 25px;
		line-height: 25px;
		font-size: 13px;
		color: #AAAAAA;
	}
	.more{
		width: 100%;
		height: 100%;
		line-height: 50px;
		font-size: 12px;
		color: #AAAAAA;
		text-align: center;
	}

</style>